<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0; list-style-type: none;}
        .cont{ width: 1200px; height: 500px; margin: 50px auto; background: #000; position: relative; transition: all 2s; overflow:hidden;}
        .cont .ct{ padding: 20px; box-sizing: border-box; display: flex; flex-direction: row; height: 500px; overflow: hidden; position: absolute; left: 0; top: 0; transition: all 2s;}
        .cont .ct .cont-1{ width: 500px; height: 100%; background: #fff; margin-right: 15px; flex: none;}
        .pages{ position: absolute; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 20; left: 0; top: 50%; transform: translateY(-50%);}
        .pages span{ color: #fff; padding: 10px 20px; border-radius: 5px; background: red; display: flex; justify-content: center; align-items: center;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="ct">
            <div class="cont-1">1</div>
            <div class="cont-1">2</div>
            <div class="cont-1">3</div>
            <div class="cont-1">4</div>
            <div class="cont-1">5</div>
            <div class="cont-1">6</div>
            <div class="cont-1">7</div>
            <div class="cont-1">8</div>
            <div class="cont-1">9</div>
            <div class="cont-1">10</div>
            <div class="cont-1">11</div>
            <div class="cont-1">12</div>
            <div class="cont-1">13</div>
            <div class="cont-1">14</div>
        </div>
        <div class="pages">
             <span class="prev">prev</span>
             <span class="next">next</span>
        </div>
    </div>
    <script>
        let prev = document.querySelector('.prev');
        let next = document.querySelector('.next');
        let ct = document.querySelector('.ct');
        let allWith = document.querySelector('.cont');
        //获取ct宽度
        let ctWidth = ct.offsetWidth;
        //获取allWith宽度
        let allWithWidth = allWith.offsetWidth;
        leftMar = 0;
        //prev点击事件 向左滑动
        prev.onclick = function(){
            let ctLeft = parseInt(window.getComputedStyle(ct).left);
            if(ctLeft <= 0){
                ct.style.left = 0;
            }else{
                leftMar =leftMar + 500;
                ct.style.left = '-' + leftMar + 'px';
            }
        }
        //next点击事件
        next.onclick = function(){
            let ctLeft1 = parseInt(window.getComputedStyle(ct).left);
            if(Math.abs(ctLeft1) < (ctWidth - allWithWidth)){
                leftMar = leftMar - 500;
                ct.style.left = leftMar + 'px';
            }else{
                ct.style.left = '-'+(ctWidth - allWithWidth) + 'px';
            }
        }
    </script>
</body>
</html>